.data-flow-design {
  $functionTypeListWidth: 170px;

  display: flex;
  align-items: flex-start;
  height: calc(100vh - 120px);
  background-color: white;
  border-radius: 5px;
  box-shadow: var(--el-box-shadow-light);

  .function-type-list {
    width: $functionTypeListWidth;
    flex-shrink: 0;
    padding-top: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;

    span {
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  .operation-space-wrapper {
    flex-grow: 1;
    position: relative;
    height: 100%;
    max-width: calc(100% - $functionTypeListWidth);
    box-sizing: border-box;
    border: 1px solid rgba(100, 100, 100, 0.1);
    //background-color: #00cec9;

    .select-area {
      position: absolute;
      //border: 1px dashed var(--el-color-primary);
      pointer-events: none;
      //animation: animateBorder 1s linear infinite;

      svg {
        rect {
          stroke: var(--el-color-primary);
          stroke-dasharray: 5 5;
          animation: run 1s linear infinite;
        }
      }
    }

    .operation-space {
      position: relative;
      height: 2000px;
      width: 2000px;
      //background-color: #777;

      background: linear-gradient(
                      45deg,
                      #f5f5f5 25%,
                      transparent 25%,
                      transparent 75%,
                      #f5f5f5 75%,
                      #f5f5f5
      ),
      linear-gradient(45deg, #f5f5f5 25%, transparent 25%, transparent 75%, #f5f5f5 75%, #f5f5f5);
      background-size: 24px 24px;
      background-position: 0 0,
      12px 12px;
    }

    ::v-deep(.jtk-hover) {
      cursor: pointer;

      .jtk-connector-outline {
        stroke: transparent;
      }

      .jtk-overlay {
        fill: var(--el-color-primary);
        stroke: var(--el-color-primary);
      }

      path:nth-child(3) {
        stroke: var(--el-color-primary);
        stroke-dasharray: 5 5;
        animation: run 1s linear infinite;
      }
    }

    @keyframes run {
      0% {
        stroke-dashoffset: 5;
      }
      100% {
        stroke-dashoffset: -5
      }
    }
  }

  .operation-space-wrapper-move {
    cursor: grab;
  }
}
